<template>
  <div class="lkr-data-panel" :style="{ 'height': documentClientHeight + 'px' }">
    <div class="search-bar">
      <div class="time-period">
        <el-cascader v-model="currentTime" :options="timeArr" @change="changeCurtime" separator=""></el-cascader>
      </div>
    </div>
    <div class="content">
      <div class="table-data">
        <el-table :data="tableData" row-key="statisticsDepartmentId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%;" border :header-cell-style="{background:'#E8EEF6'}">
          <el-table-column label="部门/岗位">
            <template slot-scope="scope"><span :style="{'padding-left': scope.row.children ? '0' : '23px'}">{{scope.row.statisticsDepartmentName}}</span></template>
          </el-table-column>
          <el-table-column prop="totalAmount" label="总关键结果数" width="180"></el-table-column>
          <el-table-column prop="completeAmount" label="完成的关键结果数" width="180"></el-table-column>
          <el-table-column prop="completePercent" label="完成的关键结果百分比" width="180"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      documentClientHeight: '',
      timeArr: [],
      currentTime: [],
      currentTimeName: '',
      tableData: [],
    };
  },
  components: {},
  mounted () {
    this.setTimeArr();
    this.getStatisticsData();
    this.documentClientHeight = document.documentElement['clientHeight'] - 60
    window.onresize = () => {
      this.documentClientHeight = document.documentElement['clientHeight'] - 60
    }
  },
  methods: {
    setTimeArr() {
      let year = parseInt((new Date).Format(`yyyy`));
      this.currentTime = [`${year}`, `02${(new Date).Format(`qq`)}`];
      this.timeArr = []
      for (let i=-5; i<=5; i++) {
        this.timeArr.push({
          value: `${year-i}`,
          label: `${year-i}年`,
          children: [{
            value: `0201`,
            label: '第1季度LKR'
          },{
            value: `0202`,
            label: '第2季度LKR'
          },{
            value: `0203`,
            label: '第3季度LKR'
          },{
            value: `0204`,
            label: '第4季度LKR'
          },{
            value: `0200`,
            label: '年度LKR'
          }]
        })
      }
    },
    changeCurtime(time) {
      this.getStatisticsData()
    },
    async getStatisticsData() {
      this.tableData = await this.$httpN.postB('lkr/lkrstatistics/list', {
        departmentBelongId: '',
        goalPeriodYear: this.currentTime[0],
        goalPeriodTime: this.currentTime[1]
      })
      if(this.tableData.length > 0) {
        this.tableData.forEach((data) => {
          this.getNextLevel(data)
        })
      }
    },
    async getNextLevel(data) {
      let result = await this.$httpN.postB('lkr/lkrstatistics/list', {
        departmentBelongId: data.statisticsDepartmentId,
        goalPeriodYear: this.currentTime[0],
        goalPeriodTime: this.currentTime[1]
      })
      if(result.length > 0) {
        this.$set(data, 'children', result);
        result.forEach(element => {
          this.getNextLevel(element)
        });
      }
    },
  }
}
</script>

<style lang='scss' scoped>
.el-dropdown-menu::-webkit-scrollbar, .content::-webkit-scrollbar {/*滚动条整体样式*/
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  scrollbar-arrow-color:red;
}
.el-dropdown-menu::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #DEDEDE;
  background: rgba(0,0,0,0.2);
  scrollbar-arrow-color:red;
}
.el-dropdown-menu::-webkit-scrollbar-track,  .content::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #F5F5F5;
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}

.lkr-data-panel {
  overflow: hidden;
  padding: 30px 50px 40px;
  .search-bar {
    background-color: #FFF;
    padding: 0 20px;
    .time-period {
      position: relative;
      padding: 20px 0;
    }
  }
  .content {
    margin-top: 20px;
    height: calc(100% - 60px);
    overflow-y: auto;
    padding: 40px;
    background-color: #FFF;
  }
}
</style>